<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- SEO优化 -->
    <meta name="description" content="前端开发石卓林的作品展示，包含Vue、React等项目案例">
    <meta property="og:image" content="images/og-image.jpg">
     <!-- 这里可以添加 CSP 安全策略 -->
    <title>开发作品集 - 石卓林</title>
    <link rel="stylesheet" href="style.css">
    <!-- 兼容性增强 -->    
    <!-- 在 Chart.js 前添加 Promise polyfill -->
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/promise-polyfill/8.2.0/polyfill.js" type="application/javascript"></script>
    <!-- 引入 Chart.js 库 -->
    <!-- 使用国内的 cdn -->
    <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/Chart.js/3.7.1/chart.js" type="application/javascript"></script><script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/Chart.js/3.7.1/chart.js" type="application/javascript"></script>
</head>

<body>
    <!-- 导航栏 -->
    <nav class="sticky-nav">
        <a href="#home" class="logo">DevPortfolio</a>
        <div class="nav-links">
            <a href="#projects">作品</a>
            <a href="#skills">技能</a>
            <a href="#contact">联系</a>
        </div>
        <button id="darkModeToggle">🌙</button>
    </nav>

    <!-- 技能展示区 -->
    <section class="section" id="skills">
        <h2 class="section-title">我的技能</h2>
        <canvas id="skillsRadarChart" width="400" height="400"></canvas>
    </section>

    <!-- 作品展示区 -->
    <section class="section" id="projects">
        <h2 class="section-title">我的项目</h2>
        <div class="gallery">
            <div class="project-card">
                <!-- # 生成WebP格式并设置懒加载 -->
                <!-- 使用 SVG 占位符替代静态图片 -->
                <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'
                 width='400' height='300' viewBox='0 0 400 300'><rect width='100%' height='100%' fill='%23f5f5f5'/></svg>"
                    data-src="images/project1.webp" class="lazyload" alt="电商开发">
                <div class="project-info">
                    <h3>电商平台前端</h3>
                    <p>基于Vue3+Element Plus开发</p>
                    <button class="demo-btn">查看演示</button>
                </div>
            </div>
            <!-- 更多项目卡片 -->
        </div>
    </section>
    <!-- 联系我们区 -->
    <section class="section" id="contact">
        <h2 class="section-title">联系我</h2>
        <form id="contactForm">
            <input type="text" id="name" placeholder="你的姓名" required>
            <input type="email" id="email" placeholder="你的邮箱" required>
            <textarea id="message" placeholder="你的留言" required></textarea>
            <button type="submit">发送</button>
        </form>
    </section>
    <!-- 数据分析 -->
    <script src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
    <script>
        window.dataLayer = window.dataLayer || []
        function gtag () { dataLayer.push(arguments) }
        gtag('js', new Date())
        gtag('config', 'GA_MEASUREMENT_ID')
    </script>
    <script src="script.js"></script>
</body>

</html>